/* CSS Document */
/* created by chow-2011 */

.table-input {
    margin: 0 0 5px 0;
    padding: 0;
    color: #333;
    font-size: 12px;
    text-align: left;
    background-image: url('../img/table-input-bg.png');
    background-position: left top;
    background-repeat: repeat-x;
    background-color: #D8E4F2;
    border: 1px solid #909AA6;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    font-family: arial;
}

.table-input th {
    margin: 0;
    padding: 5px 10px;
    border: 1px solid #909AA6;
    color: #000;
    font-size: 12px;
    vertical-align: middle;
    background-color: #BED1E8;
}

.table-input .headrow th  {
    background-color: #BFD2EA;
    border: 1px solid #909AA6;
    color: #1F3975;
}

.table-input .submit-box td {
    border-top: 1px solid #5D6C7A;
    background-color: #BBCEE6;
}

.table-input td {
    margin: 0;
    padding: 5px 5px 5px 10px;
    border-bottom: none;
    vertical-align: middle;
}

.table-input td label {
    float: left;
    margin: 2px 15px 2px 0;
    padding: 0;
}

.table-input td input, textarea {
    margin: 0 2px 0 0;
    padding: 3px 4px;
    border: 1px solid #7F9DB9;
    font-size: 12px;
    color: #000;
    font-family: arial;
    vertical-align: middle;
}

.table-input input[type="radio"] {
    margin: 0 2px 0 0;
    padding: 2px 3px;
    border: 1px solid #7F9DB9;
    vertical-align: middle;
    font-size: 12px;
}

.table-input input[type="checkbox"] {
    margin: 0 2px 0 0;
    padding: 2px 3px;
    border: 1px solid #CEE1E7;
    vertical-align: middle;
    font-size: 12px;
}

.table-input td select {
    margin: 0 2px 0 0;
    padding: 2px 3px;
    border: 1px solid #7F9DB9;
    font-size: 12px;
    vertical-align: middle;
}

.table-input td em {
    color: #666;
    font-size: 11px;
    font-style: normal;
    vertical-align: middle;
}

.table-input td option {
    margin: 0;
    padding: 0 3px;
    border-bottom: 1px solid #eaeaea;
    font-size: 12px;
}

.table-input input.edit-button {
    margin: 0 3px 0 0;
    padding: 4px 7px;
    background-color: #D1E0EF;
    background-image: url('../img/button-edit-bg.gif');
    background-position: left center;
    background-repeat: repeat-x;
    border: none;
    color: #1E395B;
    font-size: 12px;
    text-align: center;
    vertical-align: top;
    border: 1px solid #ABBAD0;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

.table-input input.edit-button:hover {
    background-color: #F9E599;
    background-image: url('../img/button-edit-hover-bg.gif');
    border: 1px solid #EEC958;
    cursor: pointer;
}

.table-input small {
    margin: 0;
    padding: 0;
    color: #CD3410;
    font-size: 11px;
}

.table-input img {
    margin: 2px 5px 0 0;
    padding: 0;
    border: none;
    vertical-align: middle;
}

/* Table view ----------------------------------------- */

.table-view.small td {
    font-size: 10px;
}

.table-view {
    margin: 0 0 5px 0;
    padding: 0;
    border-collapse: collapse;
    color: #515151;
    font-size: 11px;
    background-color: #fff;
    font-family: arial;
}

.table-view th {
    margin: 0;
    padding: 4px 0;
    background: #ebebeb url('../img/table-view-th-bg.gif') left top repeat-x;
    border: 1px solid #cdcdcd;
    color: #272727;
    font-weight: normal;
    font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
}

.table-view td {
    margin: 0;
    padding: 4px;
    border: 1px solid #edebeb;
    border-left: 1px solid #edebeb;
    border-right: 1px solid #edebeb;
    font-family: tahoma;
}

.table-view a {
    margin: 0;
    padding: 0;
    color: #3e6ba7;
    text-decoration: none;
}

.table-view a:hover {
    text-decoration: underline;
}

.table-view .blink-row {
    background-color: #f2f8fd;
}

.table-view a.button {
    margin: 0 1px;
    padding: 1px 4px;
    background-color: #fff;
    border: 1px solid #F9EBD7;
    color: #8D4F00;
    display: inline;
    text-align: center;
    text-decoration: none;
}

.table-view a.button:hover {
    background-color: #FFF6C4;
    border: 1px solid #F9EBD7;
}

.table-view a.blue {
    background-color: #e1f9d1;
    border: 1px solid #c9f5ac;
    color: #000;
}

.table-view a.red {
    background-color: #f7f7f7;
    border: 1px solid #eaeaea;
    color: #000;
}

.table-view a.button-edit {
    margin: 0 1px;
    padding: 1px 4px 1px 19px;
    background-image: url("../img/edit-icon.png");
    background-position: 4px 2px;
    background-repeat: no-repeat;
    background-color: #fff;
    border: 1px solid #F9EBD7;
    color: #8D4F00;
    display: inline;
    text-align: center;
    text-decoration: none;
}

.table-view a.button-edit:hover {
    background-color: #FFF6C4;
    border: 1px solid #F9EBD7;
}

.table-view a.button-hapus {
    margin: 0 1px;
    padding: 1px 4px 1px 19px;
    background-image: url("../img/delete-icon.png");
    background-position: 4px 3px;
    background-repeat: no-repeat;
    background-color: #fff;
    border: 1px solid #F9EBD7;
    color: #8D4F00;
    display: inline;
    text-align: center;
    text-decoration: none;
}

.table-view a.button-hapus:hover {
    background-color: #FFF6C4;
    border: 1px solid #F9EBD7;
}

/* Table search ------------------------------------------------ */

.table-search {
    margin: 0;
    padding: 0;
    border-collapse: collapse;
    font-size: 12px;
    font-family: arial;
}

.table-search th {
    margin: 0;
    padding: 6px 10px;
    color: #333;
    font-weight: bold;
    text-align: right;
}

.table-search td {
    margin: 0;
    padding: 6px 10px;
    color: #4e6ba5;
}

.table-search td label {
    margin: 0 10px 0 0;
    padding: 0;
    vertical-align: middle;
}

.table-search input {
    margin: 0;
    padding: 2px 5px;
    border: 1px solid #b4bed6;
    font-size: 12px;
    color: #666;
}

.table-search input[type="radio"] {
    margin: 0 2px 0 0;
    padding: 0;
    border: none;
    vertical-align: middle;
}

.table-search input[type="checkbox"] {
    margin: 0 2px 0 0;
    padding: 0;
    border: none;
    vertical-align: middle;
}

.table-search input[type="submit"] {
    margin: 0;
    padding: 3px 7px;
    background-color: #8BA9C4;
    background-image: url('../img/table-search-submit.gif');
    background-position: left top;
    background-repeat: repeat-x;
    border: 1px solid #614023;
    border-bottom: 1px solid #462C19;
    border-top: 1px solid #A18567;
    color: #fff;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}

.table-search input[type="submit"]:hover {
    border: 1px solid #A18567;
}

.table-search select {
    margin: 0;
    padding: 3px 5px;
    border: 1px solid #b4bed6;
    font-size: 12px;
}

.table-search img {
    margin: 0 0 0 3px;
    padding: 0;
    border: none;
    vertical-align: middle;
}

/* table info */

.table-info-box {
    margin: 0 0 5px 0;
    padding: 1%;
    background-color: #DDF0F8;
    border-top: 1px solid #99CCE6;
    float: left;
    font-size: 12px;
    width: 98%;
}

.table-info-box h3 {
    margin: 0 0 10px 0;
    padding: 0;
    color: #193061;
    font-size: 12px;
}

.table-info {
    margin: 0 0 5px 0;
    padding: 0;
    border-collapse: collapse;
    font-size: 11px;
    background-color: #FFF;
    border-bottom: 3px solid #C8E4F1;
    border-right: 2px solid #C8E4F1;
    border-left: 2px solid #C8E4F1;
    border-top: 1px solid #C8E4F1;
    color: #193061;
}

.table-info th {
    padding: 4px 6px;
    text-align: left;
}

.table-info tr {
    margin: 0;
    padding: 0;
}

.table-info tr.blink-row {
    background-color: #FEF7DB;
}

.table-info td {
    margin: 0;
    padding: 4px 6px;
    vertical-align: top;
    border-bottom: 1px dotted #C8E4F1;
}

.table-info td em {
    display: block;
    color: #666;
}

.table-info a.button-edit {
    margin: 0 1px;
    padding: 1px 4px 1px 19px;
    background-image: url("../img/edit-icon.png");
    background-position: 4px 2px;
    background-repeat: no-repeat;
    background-color: #FFF6C4;
    border: 1px solid #F9EBD7;
    color: #8D4F00;
    display: inline;
    text-align: center;
    text-decoration: none;
}

.table-info a.button-edit:hover {
    background-color: #fff;
    border: 1px solid #F9EBD7;
}

.table-info a {
    margin: 0;
    padding: 0;
    color: #8D4F00;
    text-decoration: none;
}

.table-info a:hover {
    text-decoration: underline;
}

.table-info td img {
    margin: 0 2px;
    padding: 0;
    border: none;
    vertical-align: top;
}

/* tabel calendar */

.table-calendar {
    margin: 0;
    padding: 0;
    border-collapse: collapse;
    color: #515151;
    font-size: 11px;
    background-color: #fff;
    font-family: tahoma;
}

.table-calendar th {
    margin: 0;
    padding: 4px 0;
    border: 1px solid #cdcdcd;
    color: #272727;
    vertical-align: middle;
}

.table-calendar td {
    margin: 0;
    padding: 4px;
    border: 1px solid #edebeb;
    font-size: 11px;
    vertical-align: top;
}

.table-calendar td b {
    margin: 0;
    padding: 0;
    font-size: 11px;
}

.table-calendar td p {
    margin: 0;
    padding: 2px;
    font-size: 11px;
    text-align: right;
    line-height: 16px;
    font-weight: normal;
}

.table-calendar td a {
    display: block;
    margin: 0;
    padding: 2px 6px;
    background-color: #eee;
    color: #333;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}

.table-calendar td a:hover {
    text-decoration: none;
    background-color: #ddd;
    color: #000;
}

.table-calendar td.holiday {
    color: #DD0000;
    font-size: 16px;
    font-weight: bold;
}

.table-calendar td.workingday {
    color: #258F43;
    font-size: 16px;
    font-weight: bold;
}

.table-calendar td.current{
    color: #258F43;
    font-size: 16px;
    font-weight: bold;
    background-color: #fff4b9;
    border: 1px solid #fae364;
}

.table-calendar a.blue {
    background-color: #368EE0;
    color: #fff;
}

.table-calendar a.green {
    background-color: #56AF45;
    color: #fff;
}

.table-calendar a.red {
    background-color: #E63A3A;
    color: #fff;
}

.table-calendar a.orange {
    background-color: #ffa10d;
    color: #fff;
}

/* tabel calendar2 */

.table-calendar2 {
    margin: 0;
    padding: 0;
    border-collapse: collapse;
    color: #515151;
    font-size: 9px;
    background-color: #fff;
    font-family: tahoma;
}

.table-calendar2 th {
    margin: 0;
    padding: 4px 0;
    border: 1px solid #cdcdcd;
    color: #272727;
    vertical-align: middle;
}

.table-calendar2 td {
    margin: 0;
    padding: 4px;
    border: 1px solid #edebeb;
    font-size: 9px;
    vertical-align: top;
}

.table-calendar2 td b {
    margin: 0;
    padding: 0;
    font-size: 8px;
}

.table-calendar2 td p {
    margin: 0;
    padding: 2px;
    font-size: 8px;
    text-align: right;
    line-height: 16px;
    font-weight: normal;
}

.table-calendar2 td a {
    display: block;
    margin: 0;
    padding: 2px 6px;
    background-color: #eee;
    color: #333;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}

.table-calendar2 td a:hover {
    text-decoration: none;
    background-color: #ddd;
    color: #000;
}

.table-calendar2 td.holiday {
    color: #DD0000;
    font-size: 16px;
    font-weight: bold;
}

.table-calendar2 td.workingday {
    color: #258F43;
    font-size: 16px;
    font-weight: bold;
}

.table-calendar2 td.current{
    color: #258F43;
    font-size: 16px;
    font-weight: bold;
    background-color: #fff4b9;
    border: 1px solid #fae364;
}

.table-calendar2 a.blue {
    background-color: #368EE0;
    color: #fff;
}

.table-calendar2 a.green {
    background-color: #56AF45;
    color: #fff;
}

.table-calendar2 a.red {
    background-color: #E63A3A;
    color: #fff;
}

.table-calendar2 a.orange {
    background-color: #ffa10d;
    color: #fff;
} 

.tag-green {
    background-color: #468847;
    border-radius: 3px;
    color: #FFFFFF;
    padding: 1px 10px;
}

.tag-yellow {
    background-color: #F89406;
    border-radius: 3px;
    color: #FFFFFF;
    padding: 1px 10px;
}